<template>
  <view>
    <view>
      age：{{age}}
    </view>
    <view>
      username：{{username}}
    </view>
    <view>
      <button @click="updateAgePromise">updateAge</button>
    </view>
    <view>
      <!-- 提示信息弹窗 -->
      <uni-popup ref="message" type="message">
        <uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import Vue from 'vue'
import { mapActions } from 'vuex'

export default Vue.extend({
  data(){
    return {
      type: 'center',
      msgType: 'success',
      messageText: '这是一条成功提示',
      value: ''
    }
  },
  methods: {
    ...mapActions({
      updateAge:'updateAge'
    }),
    updateAgePromise(){
      this.$store.dispatch('updateAgePromise').then(()=>{
        this.messageText = '异步更新完成';
        this.$refs.message.open(this.type);
      });
    }
  },
  computed: {
    age(){
      return this.$store.state.age
    },
    username(){
      return this.$store.state.username
    }
  }
})
</script>

<style scoped>

</style>
